<%--
  Created by IntelliJ IDEA.
  User: lijunhao
  Date: 16-11-2
  Time: 上午10:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<div class="target-item">
    <input type="hidden" name="adTargetId" id="adTargetId">
    <div class="target-item-content">
        <div class="tf-menu-nav">
            <span class="tf-menu-title" id="titles"></span>
            <div class="pull-right">
                <button class="btn btn-sm btn-primary shrink-btn" id="shrink">保存</button>
                <button class="btn btn-sm btn-primary deleteTarget-btn">删除</button>
            </div>
        </div>

        <div class="tf-menu-content" style="display: block;" id="area">
            <div class="panel-body">
                <div class="form-group">
                    <label class="col-sm-3 control-label">投放区域</label>
                    <div class="col-sm-7">
                        <label class="radio-inline radio-inline-tf" style="margin-left:-119px;">
                            <input type="radio" name="adTargetMarketType" value="1" checked="checked"> 不限
                        </label>
                        <label class="radio-inline">
                            <input id="adTargetMarketTypeArea" type="radio" name="adTargetMarketType" value="2"> 地区
                        </label>


                        <div  class="areaSelect" style="display:none">

                            <div class="province choose-area-model">
                                <div class="areaModal-header">
                                选择省
                                </div>
                                <ul class="province-list list choose-province" >
                                    <c:forEach items="${form.provinces }" varStatus="i" var="province">
                                        <li class="" data-val="${ province.id}">${province.name }</li>
                                    </c:forEach>
                                </ul>
                            </div>


                            <div class="city choose-area-model">
                                <div class="areaModal-header">
                                选择市
                                </div>
                                <ul class="city-list list">
                                
                                </ul>
                            </div>


                            <div class="content choose-area-model">
                                <div class="areaModal-header">
                                已选项
                                </div>
                                <ul class="content-list list">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">性别</label>
                    <div class="col-sm-6">
                        <label class="radio-inline radio-inline-sex">
                            <input type="radio" name="adTargetGender" value="不限" checked="checked"> 不限
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="adTargetGender" value=" 男"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="adTargetGender" value="女"> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">年龄</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input name="adTargetAge" type="checkbox" value="不限" checked="checked">不限
                        </label>
                        <label class="checkbox-inline">
                            <input name="adTargetAge" type="checkbox" value="自定义">自定义
                        </label>
                        <div id="adTargetAge" style="display:none">
                            <label class="checkbox-inline">
                                <input name="adTargetAge" type="checkbox" value="小于18">小于18
                            </label>
                            <label class="checkbox-inline">
                                <input name="adTargetAge" type="checkbox" value="18-23">18-23
                            </label>
                            <label class="checkbox-inline">
                                <input name="adTargetAge" type="checkbox" value="24-30">24-30
                            </label>
                            <label class="checkbox-inline">
                                <input name="adTargetAge" type="checkbox" value="31-40">31-40
                            </label>
                            <label class="checkbox-inline">
                                <input name="adTargetAge" type="checkbox" value="41-50">41-50
                            </label>
                            <label class="checkbox-inline">
                                <input name="adTargetAge" type="checkbox" value="大于50">大于50
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">婚姻状况</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input name="adTargetMarriage" type="checkbox" id="marriage" value="不限"
                                   checked="checked"> 不限
                        </label>
                        <label class="checkbox-inline">
                            <input name="adTargetMarriage" type="checkbox" value="自定义">自定义
                        </label>
                        <div id="adTargetMarriage" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetMarriage" value=" 已婚"> 已婚
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetMarriage" value="未婚"> 未婚
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetMarriage" value="离异"> 离异
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">商业兴趣</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input name="adTargetBusinessInterest" type="checkbox" value="不限"
                                   checked="checked"> 不限
                        </label>
                        <label class="checkbox-inline">
                            <input name="adTargetBusinessInterest" type="checkbox" value="自定义">自定义
                        </label>
                        <div id="adTargetBusinessInterest" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest" value="金融财经"> 金融财经
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest" value="体育">
                                体育
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="文化历史"> 文化历史
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest" value="娱乐">
                                娱乐
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="科技数码"> 科技数码
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="政治军事"> 政治军事
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="美容时尚"> 美容时尚
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="游戏动漫"> 游戏动漫
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="旅游美食"> 旅游美食
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="母婴育儿"> 母婴育儿
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="生活健康"> 生活健康
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="房产家装"> 房产家装
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest"
                                       value="情感星座"> 情感星座
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetBusinessInterest" value="教育">
                                教育
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">气温指数</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input name="adTargetTempeture" type="checkbox" value="不限" checked="checked">不限
                        </label>
                        <label class="checkbox-inline">
                            <input name="adTargetTempeture" type="checkbox" value="自定义">自定义
                        </label>
                        <div id="adTargetTempeture" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetTempeture" value="0度以下">0度以下
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetTempeture" value="1-10度">1-10度
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetTempeture" value="11-20度">11-20度
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetTempeture" value="20-30度">20-30度
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetTempeture" value="30-35度以上">30-35度以上
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetTempeture" value="35度以上">35度以上
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">湿度指数</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input name="adTargetHumidity" type="checkbox" value="不限" checked="checked">不限
                        </label>
                        <label class="checkbox-inline">
                            <input name="adTargetHumidity" type="checkbox" value="自定义">自定义
                        </label>
                        <div id="adTargetHumidity" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetHumidity" value="小于18">小于18
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetHumidity" value="小于18">小于18
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetHumidity" value="24-30">24-30
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetHumidity" value="31-40">31-40
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetHumidity" value="41-50">41-50
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetHumidity" value="大于50">大于50
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">紫外线指数</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetRay" value="不限"
                                   checked="checked"> 不限
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetRay" value="自定义"> 自定义
                        </label>
                        <div id="adTargetRay" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetRay" value="0-2"> 0-2
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetRay" value="3-4"> 3-4
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetRay" value="5-6"> 5-6
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetRay" value="7-9"> 7-9
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetRay" value="大于10"> 大于10
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">天气气象</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetWeather" value="不限" checked="checked"> 不限
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetWeather" value="自定义"> 自定义
                        </label>
                        <div id="adTargetWeather" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="晴"> 晴
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="多云"> 多云
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="阴"> 阴
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="小雨"> 小雨
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="大雨"> 大雨
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="小雪"> 小雪
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="大雪"> 大雪
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetWeather" value="雾霾"> 雾霾
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">设备价格定向</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetDevicePrice" value="不限" checked="checked"> 不限
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetDevicePrice" value="自定义"> 自定义
                        </label>
                        <div id="adTargetDevicePrice" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="1000元以下"> 1000元以下
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="1001-2000"> 1001-2000
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="2001-3000"> 2001-3000
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="3001-4000"> 3001-4000
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="4001-5000"> 4001-5000
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="5001-6000"> 5001-6000
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="6001-7000"> 6001-7000
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetDevicePrice" value="7000以上"> 7000以上
                            </label>
                        </div>

                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">操作系统定向</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetOs" value="不限" checked="checked"> 不限
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" name="adTargetOs" value="自定义"> 自定义
                        </label>
                        <div id="adTargetOs" style="display:none">
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetOs" value="iOS"> iOS
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetOs" value="Android"> Android
                            </label>
                            <label class="checkbox-inline">
                                <input type="checkbox" name="adTargetOs" value="手机网站"> 手机网站
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $().ready(function(){

                });

                // 地区选择
                $("input[name='adTargetMarketType']").change(function(){
                    // 如果选择自定义时间
                    if($(this).val()==2){
                        // 就显示自定义时间容器
                        $(this).parent("label").next("div").show();
                    }
                    // 如果选择不限
                    if($(this).val()==1){
                        // 就隐藏自定义时间容器
                        $(this).parent("label").next().next("div").hide();
                        $('#optgroup').multiSelect('deselect_all');
                    }
                });
                // 省点击
                $('.choose-province').find('li').on('click', function () {
                    var id  = $(this).attr('data-val');
                    var val = $(this).text();
                    // 获取省ID和文案  调用接口获取市
                    handleCityType(id,2,val,$(this));
                });
                function handleCityType(id,level,val,obj){
                    $.ajax({
                        url: "/common/area/"+level+"/"+id,
                        type: "GET",
                        dataType: "json",
                        cache: false,
                        success: function(cityOrAreaList) {
                            // 获取市成功后首先清空市
                            $('.city-list').empty();
                            // 遍历结果把市放入市容器
                            for(var i=0;i<cityOrAreaList.length;i++){
                                obj.closest('.areaSelect').find('.city-list').append("<li value='"+cityOrAreaList[i].id+"' data-province="+val+" id='"+cityOrAreaList[i].id+"'>"+cityOrAreaList[i].name+"</li>")
                            }
                            var city = obj.closest('.areaSelect').find('.city-list li');
                            var text = obj.closest('.areaSelect').find('.content-list li');
                            // 获取选中项，遍历市，如果有市已经在选中项中选中了，就把那个市隐藏起来（比对ID）
                            for(var i=0; i< city.length; i++) {
                                for(var j = 0; j < text.length; j++) {
                                    var cityId  = $(city[i]).attr('id');
                                    var textId  = $(text[j]).attr('id');
                                    if (cityId == textId) {
                                        $(city[i]).css('display','none');
                                    }
                                }
                            }

                            // 市点击
                            $('.city-list li').on('click',function() {
                                var id = $(this).attr('id');
                                var txt = $(this).text();
                                var province = $(this).attr('data-province');
                                // 将点击后的市放入 选中内容容器中，并且把当前点击的市隐藏起来
                                $(this).closest('.areaSelect').find('.content-list').append("<li value='"+id+"' id='"+id+"'><span class='provinceLabel'>"+province+" </span><span class='txt'>"+txt+"</span></li>");
                                $(this).css('display','none');
                            });


                            // 选中内容点击  查看当前市中的id有没有和现在点击的内容id相等的值，有的话就恢复显示 。把当前点击的内容删除掉
                            $('body').on('click', '.content-list li', function () {
                                var id  = $(this).attr('id');
                                var city = $(this).closest('.areaSelect').find('.city-list li');
                                for (var i = 0; i < city.length; i++) {
                                    var cityId = $(city[i]).attr('id');
                                    if (id == cityId) {
                                        $(city[i]).css('display','block');
                                    }
                                }
                                $(this).remove();
                            });
                        }
                    });
                };


                //点击不限按钮
                $("input[type=checkbox]").click(function(){
                    //点击不限
                    if($(this).val()=="不限"&&$(this).is(':checked')==true){
                        $("#"+$(this)[0].name).hide();

                        $(this).parent().parent().find("input").each(function(i,e){
                            if(i!=0){
                                $(this).prop("checked",false);
                            }
                        })
                    }
                    if($(this).val()=="自定义"&&$(this).is(':checked')==false){
                        $(this).prop("checked",true);
                    }
                    if($(this).val()=="自定义"&&$(this).is(':checked')==true){
                        $(this).closest('div.col-sm-6').find('div').eq(0).css('margin-top','10px');
                        //选择选项
                        $("#"+$(this)[0].name).show();

                        $(this).parent().parent().find("input").each(function(i,e){
                            if(i==0){
                                $(this).prop("checked",false);
                            }
                        })
                    }
                });
            </script>
        </div>

        <div class="panel-body show-panel-body" style="display: none;">

        </div>
    </div>
</div>